import { Card, Input, Button, Table, Space, message } from "antd";
import type { ColumnsType } from "antd/es/table";
import {
  SearchOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import React, { useState, useEffect } from "react";
import type {
  RecordsList,
  Records,
} from "@/api/hospital/setHospital/model/types";
import {
  deleteBatchHospital,
  getSetHospitalInfo,
  removeHospital,
} from "@/api/hospital/setHospital";
import { useNavigate } from "react-router-dom";

export default function SetHospital() {
  const [selectionType, setSelectionType] = useState<"checkbox" | "radio">(
    "checkbox"
  );

  const navigate = useNavigate();

  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(5);
  const [loading, setLoading] = useState(false);
  const [hospitalInfo, setHospitalInfo] = useState<RecordsList>([]);

  const [hoscode, setHoscode] = useState("");
  const [hosname, setHosname] = useState("");
  const [idList, setIdList] = useState<React.Key[]>([]);

  const getSetHospitalInfoFun = async (
    page: number,
    pageSize: number,
    hosname?: string,
    hoscode?: string
  ) => {
    setLoading(true);
    const res = await getSetHospitalInfo(page, pageSize, { hosname, hoscode });
    setHospitalInfo(res.records);
    setTotal(res.total);
    setLoading(false);
  };

  const deleteBatchHospitalFun = async () => {
    await deleteBatchHospital(idList);
    getSetHospitalInfoFun(page, pageSize);
  };

  const goAddHospital = () => {
    navigate("add");
  };

  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: Records[]) => {
      setIdList(selectedRowKeys);
    },
  };

  useEffect(() => {
    getSetHospitalInfoFun(page, pageSize);
  }, []);

  const data: Records[] = hospitalInfo;

  const columns: ColumnsType<Records> = [
    {
      title: "序号",
      align: "center",
      width: 80,
      render: (text, _, index) => <>{index + 1}</>,
    },
    {
      title: "医院名称",
      dataIndex: "hosname",
    },
    {
      title: "医院编号",
      dataIndex: "hoscode",
    },
    {
      title: "api基础路径",
      dataIndex: "apiUrl",
    },
    {
      title: "签名",
      dataIndex: "signKey",
    },
    {
      title: "联系人姓名",
      dataIndex: "contactsName",
    },
    {
      title: "联系人手机",
      dataIndex: "contactsPhone",
    },
    {
      title: "操作",
      key: "action",
      fixed: "right",
      width: 110,
      render: (_: Records, record) => (
        <Space size="middle">
          <Button
            size="small"
            type="primary"
            onClick={() => {
              navigate(`/syt/hospital/setHospital/update/${_.id}`);
            }}
          >
            <EditOutlined />
          </Button>
          <Button
            size="small"
            type="primary"
            danger
            onClick={async () => {
              await removeHospital(_.id);
              getSetHospitalInfoFun(page, pageSize);
              message.success("删除成功");
            }}
          >
            <DeleteOutlined />
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Card>
        <div>
          <Input
            style={{ width: 200, marginRight: 20 }}
            placeholder="医院名称"
            value={hosname}
            onChange={(e) => {
              setHosname(e.target.value);
              //   if (hosname === "") {
              //     getSetHospitalInfoFun(page, pageSize);
              //   }
            }}
          />
          <Input
            style={{ width: 200, marginRight: 20 }}
            placeholder="医院编号"
            value={hoscode}
            onChange={(e) => {
              setHoscode(e.target.value);
            }}
          />
          <Button
            type="primary"
            style={{ marginRight: 20 }}
            onClick={() => {
              getSetHospitalInfoFun(page, pageSize, hosname, hoscode);
            }}
          >
            <SearchOutlined /> 查询
          </Button>
          <Button
            onClick={() => {
              setHosname("");
              setHoscode("");
              getSetHospitalInfoFun(page, pageSize);
            }}
          >
            清空
          </Button>
        </div>
        <div style={{ marginTop: 20 }}>
          <Button
            type="primary"
            style={{ marginRight: 10 }}
            onClick={goAddHospital}
          >
            添加
          </Button>
          <Button
            onClick={deleteBatchHospitalFun}
            disabled={!idList.length}
            type="primary"
            danger
          >
            批量删除
          </Button>
        </div>
        <Table
          loading={loading}
          rowKey="id"
          rowSelection={{
            type: selectionType,
            ...rowSelection,
          }}
          style={{ marginTop: 20 }}
          columns={columns}
          dataSource={data}
          bordered
          scroll={{ x: 1500 }}
          pagination={{
            total,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `总共: ${total} `,
            defaultPageSize: 5,
            pageSizeOptions: [5, 10, 15, 20],
            onChange: (page, pageSize) => {
              setPage(page);
              setPageSize(pageSize);
              getSetHospitalInfoFun(page, pageSize);
            },
          }}
        />
      </Card>
    </div>
  );
}
